<template>
  <div class="box-shadow">
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="115px"
        >
          <el-form-item :label="$t('类别') + ':'" prop="category">
            <el-input
              v-model="listQuery.category"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item
            :label="$t('参数名称') + ':'"
            prop="parameterName"
            label-width="128px"
          >
            <el-input
              v-model="listQuery.parameterName"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="search-area-btn btns">
        <div
          @click="serachBtn"
          class="serch-btn cuver-point"
          v-hasPermi="['robot:info:search']"
        >
          {{ $t("搜索") }}
        </div>
        <div
          @click="resetFormBtn('listQuery')"
          class="reset-btn cuver-point"
          v-hasPermi="['robot:info:reset']"
        >
          {{ $t("重置") }}
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="title">{{ $t("运行统计") }}</div>
      <div class="self">
        <el-table
          ref="tableRef"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column align="center" prop="category" :label="$t('类别')">
          </el-table-column>
          <el-table-column
            align="center"
            prop="parameterName"
            :label="$t('参数')"
          >
          </el-table-column>
          <el-table-column align="center" prop="value" :label="$t('值')">
          </el-table-column>
          <el-table-column align="center" prop="unit" :label="$t('单位')">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table">
      <div class="title">{{ $t("资源使用") }}</div>
      <div class="self">
        <el-table
          ref="tableRef"
          :data="resourceData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column align="center" prop="category" :label="$t('类别')">
          </el-table-column>
          <el-table-column
            align="center"
            prop="parameterName"
            :label="$t('参数')"
          >
          </el-table-column>
          <el-table-column align="center" prop="value" :label="$t('值')">
          </el-table-column>
          <el-table-column align="center" prop="unit" :label="$t('单位')">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 机器监控-机器人信息
 */
import { getRobotInfo } from "@/api/system/info";
export default {
  name: "",
  props: {},
  data() {
    return {
      // 搜索绑定参数
      listQuery: {
        category: null,
        parameterName: null,
      },
      // 提交参数
      listQuerySubmit: {},
      tableData: [], //运行统计数据
      resourceData: [], //资源使用数据
    };
  },
  created() {
    this.listQuerySubmit = Object.assign({}, this.listQuery);
    this.getTableList();
  },
  methods: {
    /** 重置按钮操作 */
    resetFormBtn(formName) {
      this.listQuery = {
        category: null,
        parameterName: null,
      };
      this.serachBtn();
    },
    /**搜索 */
    serachBtn() {
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getTableList();
    },
    /**获取机器信息 */
    getTableList() {
      // 0-运行统计
      let obj = {
        statisticsType: "0",
        parameterName: this.listQuerySubmit.parameterName,
        category: this.listQuerySubmit.category,
      };
      getRobotInfo(obj)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          } else {
            this.$message.error(this.$t("获取运行统计数据失败"));
          }
        })
        .catch((err) => err);
      // 1-资源使用
      let obj2 = {
        statisticsType: "1",
        parameterName: this.listQuerySubmit.parameterName,
        category: this.listQuerySubmit.category,
      };
      getRobotInfo(obj2)
        .then((res) => {
          if (res.code == 200) {
            this.resourceData = res.data;
          } else {
            this.$message.error(this.$t("获取资源使用数据失败"));
          }
        })
        .catch((err) => err);
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 18px;
  font-weight: bold;
  color: #00d1ff;
  padding-bottom: 24px;
}
.table {
  width: 100%;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
}
</style>
